 <template>
     <div>
         <!-- 头部导航 -->
        <van-nav-bar
        class="app-nav-bar"
        title="登录/注册 "
        left-arrow	
        @click-left="$router.back()"
        >
          <template #left>
            <van-icon name="cross" size="18" />
          </template>
        </van-nav-bar>

        <van-form 
        ref="loginForm"
        @submit="onLogin"
        @failed="onFaild"
        validate-first
        :show-error-message="true"
        :show-error="false"	>
          <!-- 登录表单 -->
          <van-cell-group>
          <van-field
            v-model="user.mobile"
            left-icon="phone-o"
            name="mobile"
            :rules="fromRules.mobile"
            placeholder="请输入手机号"
          />
          <van-field 
            v-model="user.code"
            clearable
            left-icon="manager-o"
            name="code"
            :rules="fromRules.code"
            placeholder="请输入验证码"
           >
            <template #button>
              <van-count-down :time="1000 * 61"   format="ss 秒"  v-if="!isCountDownShow"  @finish="isCountDownShow = true"/>
              <!-- 发送验证码按钮 -->
              <van-button size="small" type="info"
              v-if="isCountDownShow"
              @click.prevent="onSendSms"
              :loading="isCodeLoding"
              >
              发送验证码
              </van-button>
            </template>
           </van-field>
          </van-cell-group>
          <!-- 登录按钮 -->
          <div class="login-btn">
            <van-button class="login-btn-wrap" type="info" 
            block
              >登录</van-button> 
          </div>
        </van-form>

     </div>
 </template>
 <script> 

import { login,sendSms } from '@/api/user'
import { Toast } from 'vant'

 export default { 
  name: 'Login',
  data() {
    return {
      user: {
        mobile: '13611111111',
        code: '246810'
      },
      //表单验证
      fromRules: {
        //mobile: [{ required: true, message: '请输入手机号' }],
        mobile: [{ required: true, message: '请输入手机号' },{ pattern:/^[1][3,4,5,7,8][0-9]{9}$/, message: '号码格式错' }],

        code: [{ required: true, message: '请填验证码' },{ pattern:/^\d{6}$/, message: '验证码格式错' }]
      },
      //控制倒计时
      isCountDownShow: true,
      //发送验证码按钮的loding状态
      isCodeLoding: false ,
    }
  }, 
  methods: {

    async onLogin () {

      //加载中提示
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration:0
      })
      try{
          const {data: res} = await login(this.user)
          console.log('这是返回结果', res)
          console.log('这是返回vuex结果', res.data)
          Toast.success('登录成功')  
          //将后端返回的嗯用户状态 token等数据保存到 vuex
          this.$store.commit('setUser',res.data)
          //登录成功 跳转到个人中心
         this.$router.push('/my')
        }catch(err){
          console.log(err)
          Toast.fail('登录失败')
          console.log(err)
        }
      },
      //验证失败调用的函数
      onFaild(error) { 
        console.log('')
        if(error.errors[0]){
          this.$toast(error.errors[0].message)
        }
      },
      //发送验证码
      async onSendSms() {
         try{
           //校验手机号
            await this.$refs['loginForm'].validate('mobile')
            //手机号校验成功  发送验证码 
            this.isCodeLoding = true
            await sendSms(this.user.mobile)
            //开启倒计时 倒计时结束显示发送按钮
            this.isCountDownShow = false

         }catch(err) { 
            //轻提示提示错误信息
            this.$toast(err.message)
            let message = ''
            //表单验证失败
            if (err.name === 'mobile'){
              message = err.message
            }else{
              //发送验证码太频繁或者其他 
              message = '发送失败'
            }
          this.$toast(message)   
         }
         //无论最后成功或失败都要关闭这个loding
         this.isCodeLoding = false
      }
  
    }
  }
 </script>
 <style lang="less" scoped>
 .login-btn{
     margin: 26px 18px;
     margin-top: 60px !important;
 }
 .van-cell-group{
     margin-top: 20px;
 }
 .van-field {
   align-items: center;
 }
 </style>
  